<template>
  <div class="container">
    <div class="search-input">
      <el-input
        v-model="resumeId"
        placeholder="根据简历id搜索"
        style="width: 400px; margin-right: 20px"
      ></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <div class="resume-table">
      <el-table class="resumeDataTable" :data="resumeData" :border="false">
        <el-table-column prop="id" label="ID" width="60px"></el-table-column>
        <el-table-column prop="gender" label="性别" width="60px">
          <template v-slot="{ row }">
            <el-tag
              :type="
                row.gender === 1
                  ? 'success'
                  : row.gender === 2
                  ? 'danger'
                  : 'success'
              "
            >
              {{ row.gender === 1 ? '男' : row.gender === 2 ? '女' : '男' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="realname" label="真实姓名"></el-table-column>
        <el-table-column prop="birthdate" label="出生日期"></el-table-column>
        <el-table-column prop="currentCity" label="当前城市"></el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          min-width="120px"
        ></el-table-column>
        <el-table-column prop="phone" label="电话"></el-table-column>
        <el-table-column prop="status" label="求职状态">
          <template v-slot="{ row }">
            <el-tag
              :type="
                row.status === 1
                  ? 'success'
                  : row.status === 2
                  ? 'info'
                  : 'warning'
              "
            >
              {{
                row.status === 1
                  ? '正在找工作'
                  : row.status === 2
                  ? '考虑机会'
                  : '暂不考虑'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="advantage"
          label="优点"
          min-width="120px"
        ></el-table-column>
        <el-table-column label="操作" min-width="100px">
          <template #default="scope">
            <div class="button">
              <el-button size="small" @click="showDialog = true" type="primary">
                求职期望和教育经历
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template #default="props">
            <el-row style="margin-top: 10px">
              <el-col :span="1"></el-col>
              <el-col :span="10">
                <p>工作经历：</p>
                <v-md-editor
                  v-model="props.row.workExperience"
                  mode="edit"
                ></v-md-editor>
              </el-col>
              <el-col :span="1"></el-col>
              <el-col :span="10">
                <p>项目经历：</p>
                <v-md-editor
                  v-model="props.row.projectExperience"
                  mode="edit"
                ></v-md-editor>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paramsForm.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="paramsForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog v-model="showDialog" title="教育经历和求职期望" width="800">
      <el-tabs
        class="tab-container"
        v-model="activeName"
        type="border-card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="教育经历" name="first">
          <el-form
            :model="educationFormData"
            ref="educationForm"
            label-position="top"
          >
            <el-row>
              <el-col :span="10">
                <el-form-item label="学校名称" prop="educationExperience">
                  <el-input
                    disabled
                    v-model="educationFormData.school_name"
                    placeholder="请输入学校名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="专业" prop="major">
                  <el-input
                    disabled
                    v-model="educationFormData.major"
                    placeholder="请输入专业"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="学制类型" prop="type">
                  <el-radio-group v-model="educationFormData.type" disabled>
                    <el-radio :label="1">全日制</el-radio>
                    <el-radio :label="2">非全日制</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="学历" prop="education">
                  <el-select
                    v-model="educationFormData.eduction"
                    placeholder="请选择学历"
                    disabled
                  >
                    <el-option label="高中及以下" :value="1"></el-option>
                    <el-option label="大专" :value="2"></el-option>
                    <el-option label="本科" :value="3"></el-option>
                    <el-option label="硕士" :value="4"></el-option>
                    <el-option label="博士" :value="5"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="入学年份" prop="enrollmentYear">
                  <el-input
                    disabled
                    v-model="educationFormData.enrollment_year"
                    placeholder="请填写入学年份"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="毕业年份" prop="graduationYear">
                  <el-input
                    disabled
                    v-model="educationFormData.graduation_year"
                    placeholder="请填写毕业年份"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="在校经历" prop="schoolExperience">
              <el-input
                disabled
                v-model="educationFormData.school_experience"
                type="textarea"
                placeholder="请输入在校经历"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="求职期望" name="second">
          <el-form :model="expectForm" ref="expectForm" label-position="top">
            <el-form-item label="求职类型" prop="type">
              <el-radio-group v-model="expectFormData.type" disabled>
                <el-radio :label="1">全职</el-radio>
                <el-radio :label="2">兼职</el-radio>
                <el-radio :label="3">实习生</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row>
              <el-col :span="10">
                <el-form-item label="期望职业标签" prop="job_tag">
                  <el-select
                    v-model="expectFormData.job_tag"
                    placeholder="请选择期望职业标签"
                    disabled
                  >
                    <el-option label="程序员" :value="1"></el-option>
                    <el-option label="公务员" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="期望行业" prop="industry_id">
                  <el-select
                    v-model="expectFormData.industry_id"
                    placeholder="请选择期望职业标签"
                    disabled
                  >
                    <el-option label="it行业" :value="1"></el-option>
                    <el-option label="金融行业" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="期望城市" prop="city">
                  <el-input
                    disabled
                    v-model="expectFormData.city"
                    placeholder="请选择期望城市"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="10">
                <el-form-item label="其他城市" prop="other_city">
                  <el-input
                    disabled
                    v-model="expectFormData.other_city"
                    placeholder="请选择其他城市"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最低薪资（单位：K）" prop="min_salary">
                  <el-input-number
                    disabled
                    v-model="expectFormData.min_salary"
                    :min="1"
                    label="请选择最低薪资"
                  ></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最高薪资（单位：K）" prop="max_salary">
                  <el-input-number
                    v-model="expectFormData.max_salary"
                    :min="1"
                    label="请选择最高薪资"
                    disabled
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import {
  getRecruitProcessGethrResumeById,
  getSysResumeFindByResumeIdById,
} from '@/servers/controller'
import { useUserStoreHook } from '@/store/modules/user'
import { ElMessage } from 'element-plus'

const userStore = useUserStoreHook()
const showDialog = ref(false)
const activeName = ref('first')
const total = ref(10)
const resumeId = ref(null)

const paramsForm = reactive({
  pageSize: 10,
  pageNum: 1,
})

const handleSizeChange = (val: number) => {
  paramsForm.pageSize = val
}

const handleCurrentChange = (val: number) => {
  paramsForm.pageNum = val
}

const handleClick = () => {
  console.log('tab click')
}

onMounted(() => {
  loadData()
})

const loadData = async () => {
  if (userStore.userInfo.id != undefined) {
    const res = await getRecruitProcessGethrResumeById({
      id: userStore.userInfo.id,
    })
    if (res.data.code === 200) {
      // @ts-ignore
      resumeData.value = res.data.data
      console.log('value:', res.data.data)
    } else {
      ElMessage.success('获取失败')
    }
  }
}

const search = async () => {
  // @ts-ignore
  const res = await getSysResumeFindByResumeIdById({ id: resumeId.value })
  if (res.data.code === 200) {
    if (res.data.data === null) {
      resumeData.value = []
    } else {
      const value = ref([])
      // @ts-ignore
      value.value[0] = res.data.data
      resumeData.value = value.value
    }
  } else {
    ElMessage.success('搜索失败')
  }
}

const reset = () => {
  // @ts-ignore
  resumeId.value = null
  loadData()
}

let educationForm = ref()
const educationFormData = reactive({
  resume_id: undefined,
  school_name: '',
  type: 1,
  eduction: 1,
  major: '',
  enrollment_year: '',
  graduation_year: '',
  school_experience: '',
})

let expectForm = ref()
const expectFormData = reactive({
  resume_id: undefined,
  type: 1,
  job_tag: 1,
  city: '',
  other_city: '',
  min_salary: 1,
  max_salary: 1,
  industry_id: 1,
})

interface Resume {
  id: number
  user_id: number
  realname: string
  gender: number
  birthdate: string
  currentCity: string
  email: string
  phone: string
  status: number
  advantage: string
  workExperience: string
  projectExperience: string
}

const resumeData = ref([
  {
    id: 1,
    user_id: 1,
    realname: '张三是',
    gender: 2,
    birthdate: '1990-01-01',
    currentCity: '北京',
    email: 'zhangsan@example.com',
    phone: '1234567890',
    status: 1,
    advantage: '沟通能力强，团队合作和国家法国红酒法国红酒高房价',
    workExperience: '公司A - 职位A - 2020年至今',
    projectExperience: '项目A - 2020年',
  },
])

const getStatusTagType = (status: number) => {
  switch (status) {
    case 1:
      return 'success' // 成功状态
    case 2:
      return 'info' // 信息状态
    case 3:
      return 'warning' // 警告状态
    default:
      return 'primary' // 默认状态
  }
}
</script>

<style scoped lang="scss">
p {
  font-size: 17px;
}

.resume-table {
  display: flex;
  justify-content: center;
  align-items: center;
}

.resumeDataTable {
  width: 85%;
  margin-top: 20px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.button {
  display: flex;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
  align-items: center;
}

.search-input {
  display: flex;
  margin-left: 120px;
  margin-top: 20px;
}

.container {
  overflow: auto;
  max-height: 700px; /* 设置最大高度，超出时将显示滚动条 */
}
</style>
